<script setup>
import { ref, reactive, onMounted, onBeforeUnmount, computed, watch, inject } from 'vue';
import { useStore } from 'vuex';
import EmptyData from '../../../components/emptyData.vue';
const store = useStore()
const api = store.state.api
const common = store.state.common.obj
const isAnchor = store.state.isAnchor
const props = defineProps({
    tabIndex: Number
})
const goTop = inject('methods').goTop
let tabIndex = props.tabIndex
watch(() => props.tabIndex, (newVal, oldVal) => {
    tabIndex = newVal
    getRankList()
    getMyRank()
}), { deep: true, immediate: true }
// 联赛值榜
let rankList = reactive({
    result: {
        list: []
    }
})
let page = ref(0)
let loading = ref(false)
const getRankList = async () => {
    await api.leg2Rank({ calendarId: tabIndex, page: page.value }).then(res => {
        // console.log('calendarId'+tabIndex,'page'+page.value);
        // console.log('接口',res.data.result);
        let result = res.data.result
        let newData
        if (result) {
            console.log(result);
            store.commit('getFirst', false)
            if (page.value > 0&&!!rankList.result) {
                newData = rankList.result.list.concat(result.list)
                // console.log(newData);
                newData.forEach((item, i) => {
                    let index = newData.findIndex(function (t) { return t.rankNo == item.rankNo });
                    if (index >= 0) {
                        result.list[index] = item
                    }
                });
            }
            rankList.result = result
            // console.log(rankList.result);
            if (page.value < (result.totalPage - 1)) {
                loading.value = true;
                page.value++;
            } else loading.value = false;
        }
    })
}
defineExpose({ page })
const rank = computed(() => {
    return rankList.result
})
const getMore = inject('methods').getMore
let timer
onMounted(() => {
    if (!store.state.firstComing) {
        getRankList()
        getMyRank()
    }
    timer = setInterval(() => {
        getRankList()
        getMyRank()
    }, 30 * 1000);
})
onBeforeUnmount(() => {
    clearInterval(timer)
})
// 我的排名
let myRankList = reactive({
    result: {}
})
const getMyRank = async () => {
    await api.leg2myRank({ calendarId: tabIndex, anchorId: isAnchor ? common.userId : common.anchorId }).then(res => {
        if (res.data.result) myRankList.result = res.data.result
        else myRankList.result = {}
    })
}
const myRank = computed(() => {
    return myRankList.result
})
</script>

<template>
    <div class="rankScore">
        <div class="rankTh">
            <p>排名</p>
            <p>主播昵称</p>
            <p>ID</p>
            <p>今日联赛值</p>
        </div>
        <ul class="rank" @scroll="getMore($event, { loading, callFun: getRankList })">
            <template v-if="rank.list.length > 0" v-for="(item, index) in rank.list" :key="index">
                <li class="rankTh" :class="{ active: item.rankNo > [200, 160, 120][tabIndex - 1] }" :id="'leg2Rank' + index">
                    <p>{{ item.rankNo }}</p>
                    <p class="name">{{ item.anchorName || '酷炫达人' }}</p>
                    <p>{{ item.anchorId }}</p>
                    <p>{{ item.scores }}</p>
                </li>
                <p class="cutLine" v-if="item.rankNo == [200, 160, 120][tabIndex - 1]">以下主播将被淘汰</p>
            </template>
            <EmptyData v-else />
        </ul>
        <p class="goTop" v-if="rank.totalPage > 1" @click="goTop('leg2Rank0')"></p>
        <div class="myScore" v-if="myRank.rankNo">
            <div v-if="isAnchor">我的<br>排名</div>
            <div v-else>当前<br>主播<br>排名</div>
            <div></div>
            <div>
                <p>
                    <span>排名</span><span>{{ myRank.rankNo }}</span>
                </p>
                <p>
                    <span>主播昵称</span><span class="name">{{ myRank.anchorName || '酷炫达人' }}</span>
                </p>
                <p>
                    <span>ID</span><span>{{ myRank.anchorId }}</span>
                </p>
                <p>
                    <span>今日联赛值</span><span>{{ myRank.scores }}</span>
                </p>
            </div>
        </div>
    </div>
</template>

<style lang='scss' scoped></style>